'use client'
import React, { useEffect, useRef, useState, useMemo } from "react";
import { Modal, Button, message, Form, Input, Select } from "antd";
import { writeDocument } from '@/app/api/index'
const { TextArea } = Input;
import { PeoplePositionsOptions } from '../../tool'

import './index.scss'


interface ModalUiProps {
    isopen: boolean;
    form_data: any;
    type: 'add' | 'edit';
    setdata: (value: boolean) => void;
}

const ModalUi: React.FC<ModalUiProps> = ({ isopen, form_data, setdata, type }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = Form.useForm();

    const send = () => {
        form.validateFields()
            .then(async (values) => {
                console.log(values);
                let data: any
                if (type == 'edit') data = await writeDocument('config.json', { ...values, id: form_data.id }, "Label")
                if (type == 'add') data = await writeDocument('config.json', values, "add")
                if (data.code === 200) message.success(data.msg);
                else message.error(data.msg);
                setIsModalOpen(false);
                setdata(false);
            })
            .catch((errorInfo) => {
                console.log('Failed:', errorInfo);
                message.error(errorInfo.errorFields[0].errors[0]);
            });
    };


    const handleCancel = () => {
        setIsModalOpen(false);
        setdata(false);
    };
    useEffect(() => {
        setIsModalOpen(isopen);
        if (isopen) {
            form.setFieldsValue(form_data); // 设置表单字段值
        } else {
            form.resetFields(); // 如果Modal关闭，重置表单字段
        }
    }, [isopen, form_data]);

    const onFinish = (values: any) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div>
            <Modal
                title={type == 'edit' ? '编辑栏目' : '添加栏目'}
                open={isModalOpen}
                onCancel={handleCancel}
                width={700}
                footer={
                    <>
                        <Button onClick={handleCancel}>取消</Button>
                        <Button type="primary" onClick={() => { send() }}>确定</Button>
                    </>
                }
            >
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 20 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    style={{ maxWidth: 700 }}
                >
                    <Form.Item label="栏目名" name="name"
                        rules={[{ required: true, message: '请输入栏目名' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label="路由地址" name="url"
                        rules={[{ required: true, message: '请输入路由地址' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label="位置" name="position"
                        rules={[{ required: true, message: '请输入数字人位置' }]}
                    >
                        <Select options={PeoplePositionsOptions} />
                    </Form.Item>

                    <Form.Item label="讲解词" name="content"
                        rules={[{ required: true, message: '请输入讲解词' }]}
                    >
                        <TextArea rows={15} placeholder="请输入讲解词" showCount />
                    </Form.Item>



                    {/* <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item> */}
                </Form>

            </Modal>
        </div >
    )
}


export default ModalUi;